<template>
  <div>
    <el-input @change="changeValue" v-bind="$attrs" v-model="inputValue"
              :clearable="clearableValue" size="medium" class="input-view" :style="inputStyle"></el-input>
    <div class="value-view">{{ inputValue }}</div>
  </div>
</template>

<script>
export default {
  name: "inputer",
  props: {
    value: {}
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.inputValue = val
      }
    }
  },
  data() {
    return {
      inputValue: ''
    }
  },
  computed: {
    inputStyle() {
      // console.log(this.$attrs)
      let {type, width} = this.$attrs
      if (width) return {}
      else if (type == 'textarea') return {width: '80%'}
      else return {width: '12rem'}
    },
    clearableValue() {
      if ('clearable' in this.$attrs) return this.$attrs.clearable
      else return true
    }
  },
  mounted() {
  },
  methods: {
    changeValue(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>
.input-view {
  margin-left: 5px;
}

.value-view {
  display: none;
}

::v-deep.input-view > .el-input__inner {
  color: #111;
  height: 2.8rem;
  line-height: 2.8rem;
  font-size: 1rem;
  background: transparent;
}

::v-deep.input-view > .el-textarea__inner {
  color: #111;
  font-size: 1rem;
  background: transparent;
}

@media print {
  .input-view {
    display: none;
  }

  .value-view {
    display: flex;
    min-width: 70px;
    margin-left: 10px;
    color: #370a0a;
  }
}
</style>
